import type { PropsWithChildren, ReactElement } from 'react';
import { StyleSheet, useColorScheme, View, Text, Animated, RefreshControl } from 'react-native';
import Animateds, {
    interpolate,
    useAnimatedRef,
    useAnimatedStyle,
    useScrollViewOffset,
} from 'react-native-reanimated';
import { useState, useRef, useCallback } from "react";


const HEADER_HEIGHT = 250;

type Props = PropsWithChildren<{
    headerImage: ReactElement;
    headerBackgroundColor: { dark: string; light: string };
}>;

export default function ParallaxScrollView({
                                               children,
                                               headerImage,
                                               headerBackgroundColor,
                                           }: Props) {
    const colorScheme = useColorScheme() ?? 'light';
    const scrollRef = useAnimatedRef<Animateds.ScrollView>();
    const scrollOffset = useScrollViewOffset(scrollRef);

    const headerAnimatedStyle = useAnimatedStyle<any>(() => {
        return {
            transform: [
                {
                    translateY: interpolate(
                        scrollOffset.value,
                        [-HEADER_HEIGHT, 0, HEADER_HEIGHT],
                        [-HEADER_HEIGHT / 2, 0, HEADER_HEIGHT * 0.75]
                    ),
                },
                {
                    scale: interpolate(scrollOffset.value, [-HEADER_HEIGHT, 0, HEADER_HEIGHT], [2, 1, 1]),
                },
            ],
        };
    });

    const [refreshing, setRefreshing] = useState(false);
    const [data, setData] = useState(['Item 1', 'Item 2', 'Item 3']);

    const onRefresh = useCallback(() => {
        setRefreshing(true);
        // 模拟网络请求
        setTimeout(() => {
            setData(['New Item 1', 'New Item 2', 'New Item 3']);
            setRefreshing(false);
        }, 1000);
    }, []);


    return (
        <View style={styles.container}>
            <Animateds.ScrollView
                ref={scrollRef}
                scrollEventThrottle={16}
                showsVerticalScrollIndicator={false}
                refreshControl={
                    <RefreshControl
                        refreshing={refreshing}
                        onRefresh={onRefresh}
                        colors={['#CCC']} // 设置下拉刷新控件的颜色
                        progressBackgroundColor="#ffffff" // 设置进度条的背景颜色
                    />
                }
            >
                <Animateds.View
                    style={[
                        styles.header,
                        { backgroundColor: headerBackgroundColor[colorScheme] },
                        headerAnimatedStyle,
                    ]}>
                    {headerImage}
                </Animateds.View>
                <View style={styles.content}>{children}</View>
            </Animateds.ScrollView>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        width: "100%",
        backgroundColor: "#fff",
    },
    header: {
        height: 0,
        width: "100%",
        overflow: 'hidden',
    },
    content: {
        // flex: 1,
        // gap: 16,
        overflow: 'hidden',
    },
});
